<template>
  <view class="data-dashboard">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">数据看板（财务）</text>
    </view>

    <!-- 时间维度切换 -->
    <view class="time-dimension-container">
      <view class="dimension-tabs">
        <view 
          v-for="(dimension, index) in timeDimensions" 
          :key="index"
          class="dimension-item"
          :class="{ active: activeDimension === index }"
          @click="switchDimension(index)"
        >
          {{ dimension.name }}
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">开始日期：</text>
          <picker mode="date" :value="filters.startDate" @change="onStartDateChange">
            <view class="picker-input">
              {{ filters.startDate || '请选择开始日期' }}
            </view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="filter-label">结束日期：</text>
          <picker mode="date" :value="filters.endDate" @change="onEndDateChange">
            <view class="picker-input">
              {{ filters.endDate || '请选择结束日期' }}
            </view>
          </picker>
        </view>
      </view>
      <view class="filter-actions">
        <button class="search-btn" @click="searchData">查询</button>
        <button class="reset-btn" @click="resetFilters">重置</button>
      </view>
    </view>

    <!-- 财务数据统计 -->
    <view class="section-container">
      <view class="section-title">财务数据统计</view>
      <view class="stats-grid">
        <view v-for="(item, index) in financeStats" :key="index" class="stats-item">
          <view class="stats-icon" :style="{ backgroundColor: item.color }">
            <text class="stats-icon-text">{{ item.icon }}</text>
          </view>
          <view class="stats-content">
            <text class="stats-label">{{ item.label }}</text>
            <text class="stats-value">{{ item.value }}</text>
            <text class="stats-trend" :class="item.trend">
              {{ item.trendText }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 基础数据和效果率 -->
    <view class="section-container">
      <view class="section-title">基础数据与效果率</view>
      <view class="stats-grid">
        <view v-for="(item, index) in basicStats" :key="index" class="stats-item">
          <view class="stats-icon" :style="{ backgroundColor: item.color }">
            <text class="stats-icon-text">{{ item.icon }}</text>
          </view>
          <view class="stats-content">
            <text class="stats-label">{{ item.label }}</text>
            <text class="stats-value">{{ item.value }}</text>
            <text class="stats-trend" :class="item.trend">
              {{ item.trendText }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 资源数据统计 -->
    <view class="section-container">
      <view class="section-title">资源数据统计</view>
      <view class="stats-grid">
        <view v-for="(item, index) in resourceStats" :key="index" class="stats-item">
          <view class="stats-icon" :style="{ backgroundColor: item.color }">
            <text class="stats-icon-text">{{ item.icon }}</text>
          </view>
          <view class="stats-content">
            <text class="stats-label">{{ item.label }}</text>
            <text class="stats-value">{{ item.value }}</text>
            <text class="stats-trend" :class="item.trend">
              {{ item.trendText }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 停车数据趋势图表 -->
    <view class="section-container">
      <view class="section-title">停车数据趋势</view>
      <view class="chart-tabs">
        <view 
          v-for="(chart, index) in chartTabs" 
          :key="index"
          class="chart-tab"
          :class="{ active: activeChart === index }"
          @click="switchChart(index)"
        >
          {{ chart.name }}
        </view>
      </view>
      <view class="chart-container">
        <qiun-data-charts 
          :type="chartTabs[activeChart].type" 
          :opts="chartOpts" 
          :chartData="currentChartData"
          :canvas2d="true"
        />
      </view>
    </view>

    <!-- 停车场财务分析 -->
    <view class="section-container">
      <view class="section-title">停车场财务分析</view>
      <view class="analysis-container">
        <!-- 收入排行榜 -->
        <view class="ranking-section">
          <view class="ranking-title">收入排行榜</view>
          <view class="ranking-list">
            <view v-for="(item, index) in parkingLotRanking" :key="index" class="ranking-item">
              <view class="ranking-number" :class="{ top: index < 3 }">
                {{ index + 1 }}
              </view>
              <view class="ranking-content">
                <text class="ranking-name">{{ item.name }}</text>
                <text class="ranking-value">¥{{ item.revenue }}</text>
              </view>
              <view class="ranking-progress">
                <view class="progress-bar" :style="{ width: item.percentage + '%' }"></view>
              </view>
            </view>
          </view>
        </view>

        <!-- 财务对比图表 -->
        <view class="comparison-section">
          <view class="comparison-title">停车场收入对比</view>
          <view class="comparison-chart">
            <qiun-data-charts 
              type="column" 
              :opts="comparisonChartOpts" 
              :chartData="comparisonChartData"
              :canvas2d="true"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 时间维度配置
const timeDimensions = [
  { name: '日', value: 'day' },
  { name: '月', value: 'month' },
  { name: '年', value: 'year' },
  { name: '累计', value: 'total' }
]
const activeDimension = ref(0)

// 筛选条件
const filters = reactive({
  startDate: '',
  endDate: ''
})

// 财务数据统计
const financeStats = ref([])

// 基础数据统计
const basicStats = ref([])

// 资源数据统计
const resourceStats = ref([])

// 图表切换
const chartTabs = [
  { name: '收入趋势', type: 'line' },
  { name: '订单量趋势', type: 'column' },
  { name: '利用率趋势', type: 'line' }
]
const activeChart = ref(0)

// 停车场排行榜
const parkingLotRanking = ref([])

// 图表配置
const chartOpts = ref({
  color: ['#1890FF', '#52C41A', '#FAAD14', '#F5222D'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: true
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2
  },
  extra: {
    line: {
      type: 'straight',
      width: 2
    },
    column: {
      width: 30
    }
  }
})

// 对比图表配置
const comparisonChartOpts = ref({
  color: ['#1890FF', '#52C41A', '#FAAD14'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: true
  },
  xAxis: {
    disableGrid: true,
    rotateLabel: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2
  },
  extra: {
    column: {
      width: 25
    }
  }
})

// 图表数据
const chartDataSets = ref({
  revenue: {},
  orders: {},
  utilization: {}
})

// 对比图表数据
const comparisonChartData = ref({})

// 当前图表数据
const currentChartData = computed(() => {
  const chartType = chartTabs[activeChart.value]
  if (chartType.name === '收入趋势') {
    return chartDataSets.value.revenue
  } else if (chartType.name === '订单量趋势') {
    return chartDataSets.value.orders
  } else {
    return chartDataSets.value.utilization
  }
})

// 切换时间维度
const switchDimension = (index) => {
  activeDimension.value = index
  loadData()
}

// 切换图表
const switchChart = (index) => {
  activeChart.value = index
}

// 日期选择
const onStartDateChange = (e) => {
  filters.startDate = e.detail.value
}

const onEndDateChange = (e) => {
  filters.endDate = e.detail.value
}

// 查询数据
const searchData = () => {
  loadData()
}

// 重置筛选
const resetFilters = () => {
  filters.startDate = ''
  filters.endDate = ''
  loadData()
}

// 加载数据
const loadData = () => {
  loadFinanceStats()
  loadBasicStats()
  loadResourceStats()
  loadChartData()
  loadParkingLotRanking()
  loadComparisonData()
}

// 加载财务数据统计
const loadFinanceStats = () => {
  financeStats.value = [
    {
      label: '总收入',
      value: '¥1,234,567.89',
      icon: '¥',
      color: '#1890FF',
      trend: 'up',
      trendText: '↗ 12.5%'
    },
    {
      label: '净利润',
      value: '¥987,654.32',
      icon: '₹',
      color: '#52C41A',
      trend: 'up',
      trendText: '↗ 8.3%'
    },
    {
      label: '运营成本',
      value: '¥246,913.57',
      icon: '⚡',
      color: '#FAAD14',
      trend: 'down',
      trendText: '↘ 3.2%'
    },
    {
      label: '退款金额',
      value: '¥12,345.67',
      icon: '↩',
      color: '#F5222D',
      trend: 'down',
      trendText: '↘ 15.8%'
    }
  ]
}

// 加载基础数据统计
const loadBasicStats = () => {
  basicStats.value = [
    {
      label: '总订单量',
      value: '45,678',
      icon: '📋',
      color: '#722ED1',
      trend: 'up',
      trendText: '↗ 18.7%'
    },
    {
      label: '支付成功率',
      value: '98.5%',
      icon: '✓',
      color: '#13C2C2',
      trend: 'up',
      trendText: '↗ 2.1%'
    },
    {
      label: '用户转化率',
      value: '76.3%',
      icon: '👥',
      color: '#EB2F96',
      trend: 'up',
      trendText: '↗ 5.4%'
    },
    {
      label: '平均停车时长',
      value: '2.5小时',
      icon: '⏱',
      color: '#FA8C16',
      trend: 'down',
      trendText: '↘ 0.3小时'
    }
  ]
}

// 加载资源数据统计
const loadResourceStats = () => {
  resourceStats.value = [
    {
      label: '泊位总数',
      value: '12,345',
      icon: '🅿',
      color: '#2F54EB',
      trend: 'up',
      trendText: '↗ 234个'
    },
    {
      label: '泊位利用率',
      value: '85.6%',
      icon: '📊',
      color: '#52C41A',
      trend: 'up',
      trendText: '↗ 3.2%'
    },
    {
      label: '设备在线率',
      value: '96.8%',
      icon: '📡',
      color: '#1890FF',
      trend: 'up',
      trendText: '↗ 1.5%'
    },
    {
      label: '故障设备数',
      value: '23',
      icon: '⚠',
      color: '#F5222D',
      trend: 'down',
      trendText: '↘ 12个'
    }
  ]
}

// 加载图表数据
const loadChartData = () => {
  const categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
  
  // 收入趋势数据
  chartDataSets.value.revenue = {
    categories,
    series: [
      {
        name: '总收入',
        data: [120000, 135000, 148000, 162000, 175000, 189000, 203000]
      },
      {
        name: '净收入',
        data: [98000, 108000, 118000, 128000, 138000, 148000, 158000]
      }
    ]
  }
  
  // 订单量趋势数据
  chartDataSets.value.orders = {
    categories,
    series: [
      {
        name: '总订单',
        data: [4500, 5200, 5800, 6100, 6700, 7200, 7800]
      },
      {
        name: '成功订单',
        data: [4320, 5070, 5684, 6009, 6599, 7128, 7722]
      }
    ]
  }
  
  // 利用率趋势数据
  chartDataSets.value.utilization = {
    categories,
    series: [
      {
        name: '泊位利用率',
        data: [78, 82, 85, 87, 89, 91, 86]
      },
      {
        name: '设备利用率',
        data: [92, 94, 96, 95, 97, 98, 97]
      }
    ]
  }
}

// 加载停车场排行榜
const loadParkingLotRanking = () => {
  const data = [
    { name: '万达广场停车场', revenue: '156,789.23', percentage: 100 },
    { name: '银泰城停车场', revenue: '134,567.89', percentage: 86 },
    { name: '恒隆广场停车场', revenue: '123,456.78', percentage: 79 },
    { name: '新世界停车场', revenue: '98,765.43', percentage: 63 },
    { name: '华润万象城停车场', revenue: '87,654.32', percentage: 56 },
    { name: '龙湖天街停车场', revenue: '76,543.21', percentage: 49 },
    { name: '凯德广场停车场', revenue: '65,432.10', percentage: 42 }
  ]
  parkingLotRanking.value = data
}

// 加载对比数据
const loadComparisonData = () => {
  comparisonChartData.value = {
    categories: ['万达广场', '银泰城', '恒隆广场', '新世界', '华润万象城'],
    series: [
      {
        name: '本月收入',
        data: [156789, 134567, 123456, 98765, 87654]
      },
      {
        name: '上月收入',
        data: [145678, 128934, 118765, 92345, 81234]
      }
    ]
  }
}

// 页面加载时初始化数据
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.data-dashboard {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.time-dimension-container {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.dimension-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.dimension-item {
  flex: 1;
  text-align: center;
  padding: 25rpx 20rpx;
  font-size: 28rpx;
  color: #666;
  border-bottom: 3rpx solid transparent;
  transition: all 0.3s;
}

.dimension-item.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  font-weight: bold;
}

.filter-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.filter-row {
  display: flex;
  margin-bottom: 20rpx;
  gap: 20rpx;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
  white-space: nowrap;
}

.picker-input {
  flex: 1;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.filter-actions {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.search-btn {
  background-color: #1890ff;
  color: #fff;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.section-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stats-item {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 25rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid #1890ff;
}

.stats-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.stats-icon-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}

.stats-content {
  flex: 1;
}

.stats-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.stats-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.stats-trend {
  font-size: 22rpx;
  font-weight: bold;
}

.stats-trend.up {
  color: #52c41a;
}

.stats-trend.down {
  color: #f5222d;
}

.chart-tabs {
  display: flex;
  margin-bottom: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 8rpx;
}

.chart-tab {
  flex: 1;
  text-align: center;
  padding: 15rpx;
  font-size: 26rpx;
  color: #666;
  border-radius: 6rpx;
  transition: all 0.3s;
}

.chart-tab.active {
  background-color: #1890ff;
  color: #fff;
}

.chart-container {
  height: 400rpx;
}

.analysis-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.ranking-section {
  background-color: #f8f9fa;
  padding: 25rpx;
  border-radius: 12rpx;
}

.ranking-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
}

.ranking-number {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #666;
  margin-right: 20rpx;
}

.ranking-number.top {
  background-color: #1890ff;
  color: #fff;
}

.ranking-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 20rpx;
}

.ranking-name {
  font-size: 26rpx;
  color: #333;
}

.ranking-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #1890ff;
}

.ranking-progress {
  width: 120rpx;
  height: 8rpx;
  background-color: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #1890ff;
  transition: width 0.3s;
}

.comparison-section {
  background-color: #f8f9fa;
  padding: 25rpx;
  border-radius: 12rpx;
}

.comparison-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.comparison-chart {
  height: 350rpx;
}
</style>